/*
 * @Description:
 * @Author: Zzt
 * @Date: 2023-02-21 14:36:59
 * @LastEditTime: 2023-02-22 18:29:03
 */
import { uploadResource } from '@/api/upload';
import { useEffect, useRef } from 'react';
import tinymce from 'tinymce';
import BundledEditor from './BundledEditor';
export default function Editor(props: any) {
  const { onChange, data } = props;

  // const { width } = props;
  const editorRef: any = useRef(null);
  console.log('data', data);

  const setValue = (props: any) => {
    console.log('dayinyixia', props);
    editorRef.current = props;
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
      onChange?.(editorRef.current.getContent());
    }
  };
  return (
    <>
      <BundledEditor
        onChange={(data: any, editor: any) => setValue(editor)}
        // onInit={(evt: any, editor: any) => setValue(evt)}
        initialValue={data}
        init={{
          height: 300,
          selector: 'textarea',
          language: 'zh-Hans',
          menubar: false,
          branding: false,
          plugins: [
            'preview',
            'advlist',
            'anchor',
            'autolink',
            'help',
            'image',
            'link',
            'lists',
            'searchreplace',
            'table',
            'wordcount',
            'media'
          ],
          automatic_uploads: true,
          toolbar:
            'undo redo blocks | ' +
            'insertfile link image media | ' +
            'bold italic forecolor table | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help  preview ',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
          link_default_target: '_blank',
          file_picker_callback: (cb: any, value: any, meta: any) => {
            console.log('image', cb, 'imabcccge', value, 'baaaa', meta);
            switch (meta.filetype) {
              case 'image': {
                const imageInput = document.createElement('input');
                imageInput.setAttribute('type', 'file');
                imageInput.setAttribute('accept', 'image/*');
                imageInput.addEventListener('change', (event: any) => {
                  const file = event.target.files[0];
                  console.log('file', file);
                  const fileList = [file];
                  const formData = new FormData();
                  fileList.forEach((file: File) => {
                    formData.append('files', file);
                  });
                  console.log('file1', formData);
                  uploadResource(formData).then((res: any) => {
                    const { data } = res;
                    console.log('res', res);
                    cb(data[0].url, {
                      alt: data[0].name
                    });
                  });
                });

                return imageInput.click();
              }
              case 'media': {
                const mediaInput = document.createElement('input');

                mediaInput.setAttribute('type', 'file');
                mediaInput.setAttribute('accept', 'audio/*,video/*');

                mediaInput.addEventListener('change', (event: any) => {
                  const file = event.target.files[0];
                  console.log('file', file);
                  const fileList = [file];
                  const formData = new FormData();
                  fileList.forEach((file: File) => {
                    formData.append('files', file);
                  });
                  console.log('file1', formData);
                  uploadResource(formData).then((res: any) => {
                    const { data } = res;
                    console.log('res', res);
                    cb(data[0].name, {
                      poster: data[0].url
                    });
                  });
                });
                return mediaInput.click();
              }
              case 'file': {
                const fileInput = document.createElement('input');

                fileInput.setAttribute('type', 'file');
                fileInput.setAttribute('accept', '*');

                fileInput.addEventListener('change', (event: any) => {
                  const file = event.target.files[0];
                  console.log('file', file);
                  const fileList = [file];
                  const formData = new FormData();
                  fileList.forEach((file: File) => {
                    formData.append('files', file);
                  });
                  console.log('file1', formData);
                  uploadResource(formData).then((res: any) => {
                    const { data } = res;
                    console.log('res', res);
                    cb(data[0].url, { text: data[0].name });
                  });
                });
                return fileInput.click();
              }
            }
          }
        }}
      />
      {/* <button onClick={log}>Log editor content</button> */}
    </>
  );
}
